<template>
	<view class="main" :style="'height:'+height+'px'">
		<view class="item" @click="clearCaches">
			<view class="box">
				
			<view class="storage">
				{{$t('mine.clearAllStorage')}}
			</view>
			<view class="num">
				{{cacheSize}}
			</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info" :title="$t('mine.isClear')" :confirmText="$t('login.confirm')" :cancelText="$t('search.cancel')"  :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cacheSize: "0B",
				height: 0,
				tabBarHeight: 0
			}
		},
		mounted() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight
			var self = this;
			plus.cache.calculate(function(size) { //size是多少个字节单位是b
			    //做下面相应的处理
			    if (size < 1024) {
			        self.cacheSize = size + 'B';
			    } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
			        self.cacheSize = Math.floor(size / 1024 * 100) / 100 + 'KB';
			    } else if (size / 1024 / 1024 >= 1) {
			        self.cacheSize = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
			    }
			});
		},
		methods: {
			clearCaches(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			confirm(){
				this.clearCache()
				this.$refs.popup.close()
			},
			clearCache() {
			    var self = this;
			    //使用plus.cache.clear 清除应用中的缓存数据
			    plus.cache.clear(function() {
			        uni.showToast({
			            title: '清除成功!',
			            icon: 'none',
			            success() {
			                self.cacheSize = '0B'
			            }
			        })
			    });
			},
		}
	}
</script>

<style lang="scss" scoped>
.main{
	width: 100%;
	background-color: #F5F6FA;
	.item{
		background-color: #FFFFFF;
		width: 100%;
		.box{
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			.storage{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #232323;
			}
			.num{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}
</style>
